<template>
	<view class="dis-pay">
	<view class="pay-select" @click="onActive">
		<view class="select-item" :id="0">
			<text class="iconfont" style="color: #51B1F7" :id="0">&#xe60a;</text>
			<text class="pay-pattern" :id="0">支付宝支付</text>
			<text :class="['iconfont','gou',currentId == 0 ? 'gou-active' : 'gou1']" :id="0">&#xe63b;</text>
			
		</view>
		<view class="select-item" :id="1">
			<text class="iconfont" style="color: #5bb63a" :id="1">&#xe634;</text>
			<text class="pay-pattern" :id="1">微信支付</text>
			<text :class="['iconfont','gou',currentId == 1 ? 'gou-active' : 'gou1']" :id="1">&#xe63b;</text>
		</view>
		
	</view>
	<button type="primary" @click="pay" class="pay-button margintop170" :disabled="payFlag">支付：{{ $format(payDatas.price) }}元</button>
	<button type="primary" class="pay-button zftime marginTop20" v-if="timeFlag">
		剩余可支付时间 <text class="iconfont">&#xe62b;</text>
		<text>{{payTime}}</text>
	</button>
	<button class="pay-button zftime marginTop20" v-else>
		支付时间已过，需重新付款
	</button>
	
	</view>
</template>

<script>
	import {mapState,mapGetters} from "vuex";
	export default {
		data() {
			return {
				key: "value",
				currentId: '0',
				// pay_type: 1, // 支付方式 1支付宝 2微信
				payFlag: false,
				// 界面显示的支付时间
				payTime: '',
				payid: '',
				payDatas: {},
				intervalId: '', // 定时器
				timeFlag: true, // 最底部显示哪一个判断
			} 
		},
		onLoad(option) {
		
			this.payDatas = JSON.parse(option.content);
				console.log(this.payDatas)
			this.payDatas['pay_type'] = 2;
			// console.log(this.payDatas);
			this.countDown(1);
		},
		computed: {
			...mapState(['payData']),
			...mapGetters(['totalPrice']),
		},
		methods: {
			
			async pay() { // 支付
				// return
				let a = await this.$http.createOrderPays(this.payDatas);
				if(a.code == 200) {
					uni.requestPayment({
					    provider: 'alipay', 
					    orderInfo: a.data.orderInfo, //微信、支付宝订单数据 -- 后台返回
					    success: (res) => {
							console.log(res)
					        console.log('success:' + JSON.stringify(res));
									clearInterval(this.intervalId);
									this.payFlag = true;
									uni.setStorageSync('payment', this.payDatas);
									uni.navigateTo({
										url: '/pages/discountMall/finishPay'
									})
					    },
					    fail: (err) =>{
					        console.log('fail:' + JSON.stringify(err));
									clearInterval(this.intervalId);
									uni.showToast({
										title: '中途取消',
										icon: 'none'
									})
					    }
					});
				}
			},
			
			// 路由跳转
			async navTo(url){
				if(this.currentId == 0) { // 支付宝支付
					let payInfo = {
						pay_type: 'alipay', 
						payid: this.payid, //先填1
					}
					let a = await this.$http.pay(payInfo);
					let orderInfo = a.data.orderInfo;
					
					return
				}
			},
			
			// 支付方式选择
			onActive(e) {
				this.currentId = e.target.id;
				if(e.target.id == 0) {
					// this.pay_type = 1;
					this.payDatas['pay_type'] = 2;
					return
				}
				this.payDatas['pay_type'] = 1;
				// this.pay_type = 2;
			},
			// 倒计时
			countDown(minute) {
				let second = minute * 1800
				 this.intervalId = setInterval(() => {
					second--
					 this.payTime = this.s_to_hs(second)
					if(second <= 0) {
						clearInterval(this.intervalId);
						this.timeFlag = false;
						// uni.showToast({
						// 	title: '已过支付时间，请重新选择',
						// })
						// 让支付按钮不可用
						this.payFlag = true
					}
				},1000)
				
				
				
			},
			// 处理时间
			s_to_hs(s){
			    //计算分钟
			    //算法：将秒数除以60，然后下舍入，既得到分钟数
			    var h;
			    h  =   Math.floor(s/60);
			    //计算秒
			    //算法：取得秒%60的余数，既得到秒数
			    s  =   s%60;
			    //将变量转换为字符串
			    h    +=    '';
			    s    +=    '';
			    //如果只有一位数，前面增加一个0
			    h  =   (h.length==1)?'0'+h:h;
			    s  =   (s.length==1)?'0'+s:s;
			    return h+':'+s;
			}
		},
	}
</script>

<style lang="scss" scoped>
@import 'static/css/smallCommon.scss'
</style>